<script setup lang="ts">
// Composables
import useStatusBarHeight from '@/composables/statusBarHeight'
import { useUserInfoStore } from '@/store/userInfo'
import { isShowNavigationBarBackgroundKey } from '@/utils/keys'

// Assets
import projectIcon from '@/static/images/profile/cellIcons/project.png'
import recordIcon from '@/static/images/profile/cellIcons/record.png'
import exitIcon from '@/static/images/profile/cellIcons/exit.png'
import agreementIcon from '@/static/images/profile/cellIcons/agreement.png'
import docIcon from '@/static/images/profile/cellIcons/doc.png'
import noticeIcon from '@/static/images/profile/cellIcons/notice.png'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const statusBarHeight = useStatusBarHeight()

const topPadding = computed(() => statusBarHeight.value + uni.upx2px(128))

// 是否显示状态栏背景
const isShowNavBg = ref(false)
// 监听页面滚动，更新状态栏背景可见性
onPageScroll((e) => {
  const toggle = useThrottleFn(() => isShowNavBg.value = e.scrollTop > 16, 100)
  toggle()
})
// 将状态栏背景可见性提供给状态栏组件
provide(isShowNavigationBarBackgroundKey, isShowNavBg)

/**
 * @description 处理设置个人资料事件
 */
function handleSetProfile() {
  router.push('profileSettings')
}

/**
 * @description 处理点击我的项目 Cell 事件。
 */
function handleTapMyProjects() {
  router.push('projectList')
}

/**
 * @description 处理点击售后 Cell 事件。
 */
function handleTapAfterSalesRecord() {
  router.push('afterSalesList')
}

/**
 * @description 处理退出登录事件。
 */
function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (result) => {
      if (result.confirm) {
        userInfoStore.setUserInfo(null)
        router.replaceAll('index')
      }
    },
    confirmColor: '#FF6D0A',
  })
}

/**
 * @description 处理点击协议 Cell 事件，根据传入的 keyword 跳转至对应的协议页面。
 *
 * @param keyword - 协议的 keyword。
 */
function handleViewProtocol(keyword: 'fwxy' | 'ysxy') {
  router.push({ name: 'protocol', params: { keyword } })
}

function handleCallCompany() {
  uni.makePhoneCall({
    phoneNumber: '13453400673',
    fail: () => { uni.showToast({ title: '呼叫取消' }) },
  })
}

function handleSubscribeMessage() {
  uni.requestSubscribeMessage({
    tmplIds: [
      'aUoYNTAg5qxP6-WIRHGrukkUrye5u_nHxm7eRTk_lrw',
    ],
  })
}

function handleSubscribeGZH() {
  router.push('empower')
}
</script>

<template>
  <view class="min-h-100vh bg-#F8F8F8">
    <!-- 状态栏 -->
    <NavigationBar title="我的" :is-show-back-button="false" />
    <!-- 页面顶部背景 -->
    <image class="z-0 absolute top-0 left-0 w-750rpx h-738rpx" src="@/static/images/profile/bg.png" />
    <!-- 下方水印 -->
    <image class="z-0 fixed bottom-24rpx x-center w-199rpx h-66rpx" src="@/static/images/profile/watermark.png" @tap="handleCallCompany" />
    <!-- 文档流 -->
    <view class="z-1 relative">
      <!-- 顶部 Padding -->
      <Spacer :height="`${topPadding}`" unit="px" />
      <!-- Profile -->
      <view class="flex items-center px-30rpx mb-48rpx" @tap="handleSetProfile">
        <!-- 头像 -->
        <Avatar :picture="userInfoStore.userInfo?.avatar" />
        <Spacer width="26" />
        <!-- 昵称 -->
        <view v-if="userInfoStore.userInfo" class="text-32rpx leading-32rpx color-#333333 font-bold">
          Hi{{ userInfoStore.userInfo.nickname ? `，${userInfoStore.userInfo.nickname}` : '' }}
        </view>
        <view v-else class="text-32rpx leading-32rpx color-#333333 font-bold">
          Hi，请先登录
        </view>
        <view class="flex-1" />
        <view class="flex flex-col items-center" @tap.stop="handleSubscribeGZH">
          <image class="w-50rpx h-40rpx" src="@/static/images/wechat_black.png" />
          <Spacer height="8" />
          <view class="text-24rpx leading-24rpx text-secondary">
            公众号
          </view>
        </view>
      </view>
      <!-- 列表 -->
      <view class="px-30rpx">
        <!-- 列表标题 -->
        <view class="text-30rpx font-bold color-#333333 leading-30rpx">
          我的工具
        </view>
        <Spacer height="24" />
        <!-- 列表 Cells START -->
        <view class="bg-white rounded-20rpx">
          <view v-if="userInfoStore.userInfo">
            <ProfileCell :icon="projectIcon" title="我的项目" @tap="handleTapMyProjects" />
            <Divider />
            <ProfileCell :icon="recordIcon" title="售后记录" @tap="handleTapAfterSalesRecord" />
            <Divider />
            <ProfileCell :icon="exitIcon" title="退出登录" @tap="handleLogout" />
            <Divider />
          </view>
          <ProfileCell :icon="agreementIcon" title="服务协议" @tap="() => handleViewProtocol('fwxy')" />
          <Divider />
          <ProfileCell :icon="docIcon" title="隐私政策" @tap="() => handleViewProtocol('ysxy')" />
          <Divider />
          <ProfileCell :icon="noticeIcon" title="消息订阅" @tap="handleSubscribeMessage" />
        </view>
        <!-- 列表 Cells END -->
      </view>
    </view>
  </view>
</template>

<route lang="yaml">
name: 'profile'
style:
  navigationStyle: 'custom'
layout: 'custom'
</route>
